<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
  <script>
    // 1 创建场景
    const scene = new THREE.Scene()

    // 2 创建相机
    const camera = new THREE.PerspectiveCamera(
      50, // 相机视野
      window.innerWidth / window.innerHeight, // 水平方向和竖直方向长度的对比
      0.1, // 近端渲染距离
      1000, // 远端渲染距离
    )
    // 2.1 设置相机位置
    camera.position.set(25, 20, 10)

    // 3 创建渲染器
    const renderer = new THREE.WebGLRenderer()
    // 3.1 设置渲染器的大小（长宽）（设置渲染器为全屏）
    renderer.setSize(window.innerWidth, window.innerHeight)

    // 3.2 将渲染器展示到页面上
    document.body.appendChild(renderer.domElement)

    // 4 创建几何体模型（立方几何体）
    const geometry = new THREE.BoxGeometry(4, 4, 4)

    // 5 创建材质 （基础网格材质和法线网格材质）
    // 5.1 创建基础网格材质
    const materialBasic = new THREE.MeshBasicMaterial({
      color: '#fff',
      wireframe: true, // 是否将几何体渲染为线框，默认值为false（即渲染为平面多边形）
    })
    // 5.2 创建法线网格材质
    const materialNormal = new THREE.MeshNormalMaterial()

    // 6 创建多种网格（因为有多种材质）
    // 第一个参数是几何模型，第二参数是材质
    const cube = THREE.SceneUtils.createMultiMaterialObject(geometry, [
      materialBasic,
      materialNormal
    ])
    // 6.1 将网格添加到场景中
    scene.add(cube)
    // 6.2 让相机看向物体位置（默认状态下，相机只想三维坐标的原点）
    cube.position.set(0, 0, 0)
    camera.lookAt(cube.position)

    // 7 创建光源
    const spotLight = new THREE.SpotLight(0xffffff)
    // 7.1 设置光源位置
    spotLight.position.set(0,20,20)
    // 7.2 设置光源强度，默认为1
    spotLight.intensity = 5
    // 7.3 将光源添加到场景中
    scene.add(spotLight)

    // 8 为了方便观察3D图像，添加三位坐标对象
    const axes = new THREE.AxisHelper(6)
    scene.add(axes)

    // 9 结合场景和相机进行渲染，即用相机排下此刻的场景
    renderer.render(scene, camera)

    // 动画函数
    function animate() {
      // 循环调用函数
      requestAnimationFrame(animate)

      // 一些操作
      cube.rotation.x += 0.01
      cube.rotation.y += 0.01

      renderer.render(scene, camera)
    }
    animate()
  </script>
</body>
</html>